<template>
  <div class="columnFilter">
    <el-divider content-position="left">
      <i></i>库表基本信息
    </el-divider>
    <el-form label-width="120px">
      <el-form-item label="数据库类型">{{ dataSource.databaseType }}</el-form-item>
      <el-form-item label="数据源">{{ dataSource.databaseName }}</el-form-item>
      <el-form-item label="表名" v-if="mode==='simpleTable' || mode==='online'">{{ dataSource.tableName }}</el-form-item>
      <div v-if="mode==='simpleTable' || mode==='online'">
        <el-divider content-position="left">
          <i></i>过滤条件
        </el-divider>
        <div class="tableBox">
          <znxd-list-modify v-model="tableData" :formColumn="formColumn" :initData="initData.jobColumnFilter" mode="addAndDelete"></znxd-list-modify>
        </div>
      </div>
      <div v-else-if="mode==='multilist'">
        <el-divider content-position="left">
          <i></i>过滤条件
        </el-divider>
        <div class="tableFilter">
          <div class="tableList">
            <!-- <el-table ref="singleTable" :data="getDataSource.multilistData" highlight-current-row @current-change="handleCurrentChange" style="width: 100%">
              <el-table-column prop="tableName" label="数据库表"></el-table-column>
            </el-table>-->
            <znxd-button-table ref="button_table" v-model="currentTableName" name="tableName" label="数据库表" :initData="dataTarget.multilistData"></znxd-button-table>
          </div>
          <div class="filter" v-if="currentTableName!==''" >
            <znxd-list-modify v-model="multilistTableData" :formColumn="multilistFormColumn" :initData="multilistColumnFilter" mode="addAndDelete"></znxd-list-modify>
          </div>
        </div>
      </div>
    </el-form>
  </div>
</template>
<script>
import { getColumnsType } from "@/api/dataset/table.js";
export default {
  components: {},
  data() {
    return {
      operatorOptions: [
        {
          label: "=",
          value: "="
        },
        {
          label: ">=",
          value: ">="
        },
        {
          label: "<=",
          value: "<="
        },
        {
          label: ">",
          value: ">"
        },
        {
          label: "<",
          value: "<"
        },
        {
          label: "<>",
          value: "<>"
        },
        {
          label: "IS NULL",
          value: "IS NULL"
        },
        {
          label: "IS NOT NULL",
          value: "IS NOT NULL"
        }
      ],
      // 单表配置 start
      columnOptions: [],
      tableData: [],
      // 列表表单配置
      formColumn: [
        // {
        //   name: "columnName",
        //   label: "一级名称",
        //   type: "select",
        //   options: this.columnOptions
        // },
        // {
        //   name: "operator",
        //   label: "操作符",
        //   type: "select",
        //   options: this.operatorOptions
        // },
        // {
        //   name: "value",
        //   label: "取值",
        //   type: "input"
        // },
        // {
        //   name: "linkWord",
        //   label: "与下一级的连接符",
        //   type: "input"
        // }
      ],
      // columnFilter: [],
      // getDataSource: [],
      // 单表配置 end
      // 多表配置 start
      currentTableName: "",
      currentTables: [],
      multilistTableData: [],
      multilistColumnFilter: [],
      multilistFormColumn: [
        // {
        //   name: "columnName",
        //   label: "一级名称",
        //   type: "select",
        //   options: this.columnOptions
        // },
        // {
        //   name: "operator",
        //   label: "操作符",
        //   type: "select",
        //   options: this.operatorOptions
        // },
        // {
        //   name: "value",
        //   label: "取值",
        //   type: "input"
        // },
        // {
        //   name: "linkWord",
        //   label: "与下一级的连接符",
        //   type: "input"
        // }
      ]
      // 多表配置 end
    };
  },
  props: {
    initData: Object,
    dataSource: Object,
    mode: String,
    dataTarget: Object
  },
  watch: {
    tableData: {
      deep: true,
      handler: function (val) {
        console.log("columnFilter", val);
        this.$emit("input", val);
      }
    },
    "dataSource.selection": {
      deep: true,
      handler: function (val) {
        // console.log("filter dataSource.selection", val);
        // this.columnFilter = Object.assign([], val.selection);
        if (!val) {
          return;
        }
        this.columnOptions = [];
        val.map((x) => {
          this.columnOptions.push({
            label: x.columnName,
            value: x.columnName
          });
        });

        this.formColumn = [
          {
            name: "columnName",
            label: "字段名称",
            type: "select",
            options: this.columnOptions
          },
          {
            name: "operator",
            label: "操作符",
            type: "select",
            options: this.operatorOptions
          },
          {
            name: "value",
            label: "取值",
            type: "input"
          },
          {
            // name: "linkWord",
            name: "connector",
            label: "与下一级的连接符",
            type: "select",
            options: [
              {
                label: "and",
                value: "and"
              },
              {
                label: "or",
                value: "or"
              }
            ]
          }
        ];
      }
    },
    currentTables(val) {
      this.$emit("input", val);
    },
    currentTableName(val) {
      // console.log("currentTableName", val);
      this.getColumnsType();

      // console.log("this.currentTables", this.currentTables);
      let arr = this.currentTables.filter((x, index) => {
        return x !== null && x.tableName === val;
      });
      if (arr.length > 0) {
        this.multilistColumnFilter = [...arr[0].jobColumnFilter];
      } else {
        this.multilistColumnFilter = [];
      }
    },
    multilistTableData(val) {
      let _this = this;
      let obj = {
        tableName: this.currentTableName,
        jobColumnFilter: val
      };

      _this.currentTables.forEach((x, index) => {
        if (x.tableName === obj.tableName) {
          _this.currentTables.splice(index, 1);
        }
      });
      _this.currentTables.push(obj);

      // console.log("this.currentTables", _this.currentTables);
    },
    // dataSource: {
    //   deep: true,
    //   handler: function (val) {
    //     let obj = {
    //       databaseType: val.databaseType,
    //       databaseName: val.databaseName,
    //       tableName: val.tableName
    //     }
    //     console.log("columnFilter val", val);
    //     this.getDataSource = obj;
    //     console.log("columnFilter getDataSource", this.getDataSource);

    //     // this.$set(this.getDataSource, val);
    //   }
    // },
    initData: {
      deep: true,
      handler: function (val) {
        // console.log("initData", val);
        // this.jobColumnFilter = Object.assign([], val.jobColumnFilter);
        // this.columnFilter = val.jobColumnFilter.concat();
        // this.columnFilter = val.jobColumnFilter;
        // [...this.columnFilter] = val.jobColumnFilter;
        // val.jobColumnFilter.map((x) => {
        //   this.columnFilter.push(x);
        // });
        if (val.readerTables) {
          this.currentTables = [...val.readerTables];
          // console.log("initData currentTables", this.currentTables);
        }
      }
    },
    "dataTarget.multilistData"(val) {
      if (val.length > 0) { this.$refs.button_table.setCurrent(val[0]) }
    }
    //
  },
  methods: {
    getColumnsType() {
      let _this = this;
      let obj = {
        datasourceId: this.dataSource.database,
        tableName: this.currentTableName
      };
      getColumnsType(obj).then((res) => {
        let data = res.data;
        if (data.code === 200) {
          // this.tableData = data.content;
          // this.page.total = data.total;
          this.columnOptions = data.content;
          this.columnOptions = [];
          data.content.map((x) => {
            this.columnOptions.push({
              label: x.columnName,
              value: x.columnName
            });
          });

          _this.multilistFormColumn = [
            {
              name: "columnName",
              label: "字段名称",
              type: "select",
              options: this.columnOptions
            },
            {
              name: "operator",
              label: "操作符",
              type: "select",
              options: this.operatorOptions
            },
            {
              name: "value",
              label: "取值",
              type: "input"
            },
            {
              // name: "linkWord",
              name: "connector",
              label: "与下一级的连接符",
              type: "select",
              options: [
                {
                  label: "and",
                  value: "and"
                },
                {
                  label: "or",
                  value: "or"
                }
              ]
            }
          ];
        } else {
          this.$message({
            message: data.msg,
            type: "error"
          });
        }
      });
    },
    // 校验数据
    validateForm() {
      let flag = true;
      // 单表验证
      if (this.tableData && this.tableData.length > 0) {
        this.tableData.map(x => {
          if (!x.columnName || x.columnName === "") {
            flag = false;
            this.$message({
              message: "过滤条件中名称不能为空",
              type: "error"
            });
            return flag
          }

          if (!x.operator || x.operator === "") {
            flag = false;
            this.$message({
              message: "过滤条件中操作符不能为空",
              type: "error"
            });
            return flag
          }

          if (!x.value || x.value === "") {
            flag = false;
            this.$message({
              message: "过滤条件中值不能为空",
              type: "error"
            });
            return flag
          }
        })
      } else if (this.mode === "multilist" && this.currentTables && this.currentTables.length > 0) {
        // 多表验证
        this.currentTables.map(table => {
          console.log(this.currentTables);
          console.log(table);
          table.jobColumnFilter.map(x => {
            if (!x.columnName || x.columnName === "") {
              flag = false;
              this.$message({
                message: table.tableName + "表：过滤条件中名称不能为空",
                type: "error"
              });
              return flag
            }

            if (!x.operator || x.operator === "") {
              flag = false;
              this.$message({
                message: table.tableName + "表：过滤条件中操作符不能为空",
                type: "error"
              });
              return flag
            }

            if (!x.value || x.value === "") {
              flag = false;
              this.$message({
                message: table.tableName + "表：过滤条件中值不能为空",
                type: "error"
              });
              return flag
            }
          })
        })
      }

      return flag;
    }
  },
  mounted() {
    // this.currentTables = this.initData.readerTables;
  }
};
</script>
<style lang="scss" scoped>
.columnFilter {
  .el-divider__text.is-left {
    left: 0;
    display: flex;
    flex-direction: row;
    > i {
      display: block;
      width: 3px;
      height: 14px;
      background: #128df3;
      margin-right: 5px;
    }
  }
  .tableBox {
    padding-left: 40px;
  }
  .tableFilter {
    display: flex;
    flex-direction: row;
    .tableList {
      width: 220px;
      padding: 0 15px;
      margin-left: 30px;
      border: 1px solid #f4f4f4;
    }
    .filter {
      width: calc(100% - 250px);
    }
  }
}
</style>
